<template>
  <div class="container">
    <Header/>
    <main> 
      <AsideNav/>
      <div class="content__container">
        <div class="spacer"></div>
        <div class="content__box">
          <router-view class="content__main">
          </router-view>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import {AsideNav, Header} from '@/components';
export default {
  name: 'index',
  components: {
    AsideNav,
    Header
  },
  data() {
    return {

    }
  },
}
</script>

<style lang="stylus" scoped>
.container 
  display flex
  flex-direction column
  height 100%
main 
  flex 1
  display flex
.content__container
  // width 100%
  flex: 1
  display flex
  flex-direction column
  height 100%
.spacer
  height 10px
  border 1px solid #999
  border-left: none
  border-right none
  background #bbb;
.content__box
  flex 1
  padding 20px
  overflow auto
  box-sizing border-box 
.content__main
  height 100%
</style>
